import React, {Component} from 'react';
import {RootStack} from './navigators'
import {Provider} from 'react-redux'
import store from './store'
import {loadLogo} from './actions'

class App extends Component {
    state = {
        currentScreen: null
    }
    // gets the current screen from navigation state
    getCurrentRouteName(navigationState) {
        if (!navigationState) {
            return null;
        }
        const route = navigationState.routes[navigationState.index];
        // dive into nested navigators
        if (route.routes) {
            return this.getCurrentRouteName(route);
        }
        return route.routeName;
    }
    handleNavigatonStateChande(prevState, currentState) {
        const currentScreen = this.getCurrentRouteName(currentState);
        const prevScreen = this.getCurrentRouteName(prevState);
        if (prevScreen !== currentScreen) {
            this.setState({currentScreen})
        }
    }
    render() {
        return (
            <Provider store={store}>
                <RootStack
                    screenProps={{
                    currentScreen: this.state.currentScreen
                }}
                    onNavigationStateChange={(prev, current) => this.handleNavigatonStateChande(prev, current)}/>
            </Provider>
        )
    }
}

export default App
